<!--
    @Title: LeafterAnimation
    @Author  dudalei
    @Package 
    @Date  2024/10/16 15:16
    @description: 动画组件
-->
<script setup lang="ts">
import { gsap } from 'gsap'
import { formSelectInjectKey } from '@/components/LeaferApp/LeaferInjectKeys'
import type { UI } from 'leafer-ui'

const getFormSelect = inject(formSelectInjectKey)

interface FormInterface {
  // 延迟
  delay: number
  // 持续时间
  duration: number
  // 动画函数
  // 详情配置值参考  https://gsap.com/docs/v3/Eases/
  ease: string
  // 重复次数 默认值为0:代表一次 1:代表2次 -1:代表无限循环
  repeat: number
}

const animationForm = reactive<FormInterface & gsap.TweenVars>({
  delay: 0,
  duration: 3,
  ease: 'none',
  repeat: -1,
})

let tween: any
const start = () => {
  if (!getFormSelect) {
    return
  }
  const currentNode = getFormSelect()
  if (!currentNode) {
    return
  }
  if (tween) {
    tween.kill()
  }
  // 每次执行动画时需要将旋转角度重置为0 不然无法再次旋转 或者使用第三个变量实现
  currentNode.rotation = 0
  // console.log(currentNode.rotation)
  tween = gsap.to(currentNode, {
    // 旋转360度
    rotation: 360,
    ...animationForm,
  })
}

watch(() => animationForm, start, { deep: true })

/**
 * 添加动画
 */
const addAnimation = () => {
  // currentNode.around = 'center'
  start()
}
</script>

<template>
  <div>
    <el-form-item label="动画效果">
      <el-button @click="addAnimation">新增</el-button>
    </el-form-item>
    <el-form-item label="延迟">
      <el-input-number v-model="animationForm.delay" :min="0">
        <template #suffix>
          <span>秒</span>
        </template>
      </el-input-number>
    </el-form-item>
    <el-form-item label="持续时间">
      <el-input-number :min="0" v-model="animationForm.duration">
        <template #suffix>
          <span>秒</span>
        </template>
      </el-input-number>
    </el-form-item>
    <el-form-item label="循环次数">
      <el-select v-model="animationForm.repeat">
        <el-option :value="0">一次</el-option>
        <el-option :value="1">两次</el-option>
        <el-option :value="2">三次</el-option>
        <el-option :value="-1">无限次</el-option>
      </el-select>
    </el-form-item>
  </div>
</template>

<style scoped lang="scss"></style>
